<template>
  <view class="my-page">
	<view class="head">
	  <view class="user-info">
	  </view>
	</view>
    <view class="list">
      <view class="h1">
		  {{actDetail.title}}
	  </view>
	  <view class="h2">
		  时间：{{actDetail.act_time}}
	  </view>
	  <view class="h2">
		  地点：{{actDetail.address}}
	  </view>
	  <view class="h2">
		  适合人群：{{actDetail.describ}}
	  </view>
	  <view class="h2">
		  费用： 
		  <span v-if="actDetail.price==0">免费</span>
		  <span v-else>￥{{actDetail.price}}元</span>
		  
	  </view>
	  <view class="h1">
		  活动内容
	  </view>
	  <view class="h3">
		  {{actDetail.content}}
	  </view>
    </view>
	<view class="button">
		<button type="warn" @click="apply(actDetail.act_id)">报 名</button>
	</view>
  </view>
</template>

<script>
  import storage from '@/utils/storage'
  import { getActInfo,applyAct  } from '@/api/activity.js'
  export default {
    data() {
      return {
		  actId:0,
          actDetail:{}
      }
    },
	methods:{
		apply(id){
			applyAct(id).then(res=>{
				if(res.code==200){
					uni.navigateTo({
						url:"/pages/appointment/study"
					})
				}else{
					uni.showToast({
						title: res.msg
					})
				}
			})
		}
	},
    computed: {
      avatar() {
        return this.$store.state.user.avatar
      },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
	onLoad(param) {
		this.actId = param.id
		uni.setNavigationBarTitle({
			title:"研学详情"
		})
		// 设置导航栏标题颜色
		uni.setNavigationBarColor({
		  frontColor: '#ffffff',
		  backgroundColor: '#721b28'
		});
		
		getActInfo(this.actId).then(res=>{
			this.actDetail = res.data
		})
	}
  }
</script>

<style lang="scss" scoped>
.my-page {
  .head{
    background: url(http://demo.cyyyds.cn/uploads/20250114/1.jpg);
	background-size: 100% 100%;
    .user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		height:500upx;
    }
  	
  }
  .list {
	padding: 20upx 30upx;
	.h1{
		font-size:30upx;
		font-weight: bold;
		padding:30upx 0 ;
	}
	.h2{
		font-size:20upx;
		color:#666;
		padding: 5px 0;
	}
	.h3{
		font-size: 20upx;
		color:#666;
		
	}
  }
  .button{
	  position: absolute;
	  width:96%;
	  margin: 1% 2%;
	  bottom:0px;
  }
}


</style>